import React, { Component } from 'react';
import _ from 'lodash';
import './index.less';
import { Icon, Tabs } from 'antd';
import moment from 'moment';
import PropTypes from 'prop-types';
const { TabPane } = Tabs;
const prefixCls = 'ports-card';

class PortsCard extends Component {
  render() {
    const { data } = this.props;
    return (
      <div className={`${prefixCls}`}>
        {!_.isEmpty(data) &&
          data.map((item, index) => {
            const device = _.get(item, 'device', '');
            const version = _.get(item, 'version', '');
            const service = _.get(item, 'service', '');
            const os = _.get(item, 'os', '');
            const timestamp = _.get(item, 'timestamp');
            const banner = _.get(item, 'banner', '');
            const port = _.get(item, 'port', '');
            const ip = _.get(item, 'ip', '');
            const app = _.get(item, 'app', '');
            const ssl = _.get(item, 'ssl', '');
            let time = timestamp ? moment(timestamp) : moment();
            time = time.format('YYYY-MM-DD HH:mm:ss');

            return (
              <div key={index} className={`${prefixCls}-ports`}>
                <div className={`${prefixCls}-ports-left`}>
                  <h4 className={`${prefixCls}-ports-left-header`}>
                    {port}/{service}
                    {ip && _.includes(['http', 'https'], service) ? (
                      <a
                        href={`${service}://${ip}:${port}`}
                        target="_blank"
                        rel="noopener noreferrer"
                      >
                        <Icon
                          type="right-circle"
                          className={`${prefixCls}-ports-icon`}
                          theme="filled"
                        />
                      </a>
                    ) : (
                      ''
                    )}
                  </h4>
                  <p>
                    <span className={`${prefixCls}-ports-left-name`}>设备</span>
                    <span className={`${prefixCls}-ports-left-value`}>{device}</span>
                  </p>
                  <p>
                    <span className={`${prefixCls}-ports-left-name`}>组件</span>
                    <span className={`${prefixCls}-ports-left-value`}>{app}</span>
                  </p>
                  <p>
                    <span className={`${prefixCls}-ports-left-name`}>版本</span>
                    <span className={`${prefixCls}-ports-left-value`}>{version}</span>
                  </p>
                  <p>
                    <span className={`${prefixCls}-ports-left-name`}>服务</span>
                    <span className={`${prefixCls}-ports-left-value`}>{service}</span>
                  </p>
                  <p>
                    <span className={`${prefixCls}-ports-left-name`}>操作系统</span>
                    <span className={`${prefixCls}-ports-left-value`}>{os}</span>
                  </p>
                  <p>
                    <span className={`${prefixCls}-ports-left-name`}>更新时间</span>
                    <span className={`${prefixCls}-ports-left-value`}>{time}</span>
                  </p>
                </div>
                <div className={`${prefixCls}-ports-right`}>
                  <Tabs defaultActiveKey="banner">
                    <TabPane tab="banner" className={`${prefixCls}-ports-tab`} key="banner">
                      <pre>{banner || '暂无'}</pre>
                    </TabPane>
                    {ssl ? (
                      <TabPane tab="证书" className={`${prefixCls}-ports-tab`} key="ssl">
                        <pre>{ssl}</pre>
                      </TabPane>
                    ) : (
                      ''
                    )}
                  </Tabs>
                </div>
              </div>
            );
          })}
      </div>
    );
  }
}

PortsCard.propTypes = {
  data: PropTypes.array
};

export default PortsCard;
